<template>
	<view class="container">
		<view class="content">
			<view class="toubu">
				<view class="kongbai">
					<input class="shurukuang" placeholder="搜索组件名称"/>
					<button class="sousuo">搜索</button>
				</view>
				<view class="tiaojian">
					<view class="anniu">最近使用</view>
					<view class="anniu">使用次数</view>
					<view class="anniu">组件分类</view>
				</view>
			</view>
			<view class="liebiao">
				<uni-grid :column="1" :show-border="false"  :square="false" @change="change">
					<uni-grid-item class="leibieliebiao" v-for="(item, index) in tongyongzujianliebiao_data.tongyongzujian_list_data" :key="index">
						<!-- <image class="ysyimage" :src="item.image" mode="aspectFill" ></image> -->
						<text class="text">{{ item.content }}</text>
						<image class="image" :src="item.image" mode="aspectFit"></image>
						<text class="miaoshu">{{item.discreble}}</text>
					</uni-grid-item>
				</uni-grid>
			</view>
			<view class="button_anniu" @click="add_tongyongzujian">新增通用组件</view>
		</view>
	</view>
</template>

<script>
	import uniGrid from "@/components/uni-grid/uni-grid.vue"
	import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
	export default {
	    components: {uniGrid,uniGridItem},
			data() {
				return {
					tongyongzujianliebiao_data:{}
				}
			},
			async onLoad(option){
				this.tongyongzujianliebiao_data = await this.$api.json('tongyongzujianliebiao_data');
				console.log(JSON.stringify(this.tongyongzujianliebiao_data));
			},
			onShow() {
				// let params = {
				// 	"canshu1": this.tongyongzujianliebiao_data.canshu1
				// };
				// upload_data(params, 'GET', this.$api.Apiurl.gongzuotaishouye_urlData.url, (res) => {
				// 	if (res.data.code == 1) {
				// 		this.tongyongzujianliebiao_data = this.$api.Json.tongyongzujianliebiao_data;
				// 	} else {
				// 		msg(res.data.msg);
				// 	}
				// });
			},
			methods:{
				change(e) {
					let {
						index
					} = e.detail
					let link_url = this.tongyongzujianliebiao_data.tongyongzujian_list_data[index].url;
					uni.navigateTo({
						url:link_url
					})
				},
				add_tongyongzujian(){
					uni.navigateTo({
						url:"/pages/gongzuotai/zujian/tongyongzujian/add_tongyongzujian/add_tongyongzujian"
					})
				}
				
			}
	}
</script>

<style>
	.content{
		/* position: relative; */
	}
	.toubu{
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		margin-top: 82upx;
		z-index: 100;
		background-color: #FFFFFF;
	}
	.liebiao{
		margin-top: 180upx;
		z-index: -1;
	}
	.kongbai{
		/* background: #EDEDED; */
		width: 100%;
		height: 80upx;
		border-bottom: 2upx solid #EDEDED;
		display: flex;
		flex-direction:row;
		padding: 0upx 10upx;
	}
	.leibiaofenlei{
		margin-top: 50upx;
	}
	.image_set{
		width: 120upx;
		height: 120upx;
	}
	.text{
		color: #707070;
		font-size: 45upx;
		/* border:1upx solid red; */
		/* 超出n行用省略号 */
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		
	}
	.image{
		/* border:1upx solid red; */
		width: 100%;
		/* background-color: #0081FF; */
	}
	.miaoshu{
		/* border:1upx solid red; */
		width: 100%;
		/* 超出n行用省略号 */
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.ysyimage{
		width: 120upx;
		height: 120upx;
	}
	.leibieliebiao{
		border-bottom: 2upx solid #909399;
		/* height: 540upx; */
		/* line-height: 200upx; */
		
	}
	.shurukuang{
		border:2upx solid #EDEDED;
		border-radius: 13upx;
		/* width: 90%; */
		flex:4;
		height: 100%;
		padding-left: 20upx;
		/* margin: 0upx auto; */
	}
	.sousuo{
		flex:1;
		color: #6D6D6D;
	}
	.tiaojian{
		display: flex;
		flex:1;
		border-bottom: 2upx solid #909399;
		height: 100upx;
		line-height: 98upx;
		padding:5upx 0upx;
		margin-bottom: 10upx;
		
	}
	.anniu{
		border: 2upx solid #EDEDED;
		flex:1;
		text-align: center;
		color: #6D6D6D;
		-moz-box-shadow:0 0 20px #EDEDED;
		-webkit-box-shadow:0 0 20px #EDEDED;
		box-shadow:0 0 18px #EDEDED;
	}
	.anniu:not(:last-child){
		margin-right: 10upx;
	}
	.button_anniu{
		position: fixed;
		bottom:0;
		left:0;
		
	}
</style>
